@import "../../commonFunc";

.document_component_module{
    ul {
        li {
            width: calc((100% / 6) - 16px);
            height: px2rem(124);
            margin: px2rem(8);
            @include position(relative);
            border: 1px solid rgba(175, 137, 98, .6);
            @include bgColor(rgba(255, 255, 255, .4));
            transition: .3s linear;
            cursor: pointer;

            &:hover {
                transform: scale(1.05);
                box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
            }


            .icon_box {
                @include widthHeight(px2rem(70));
                @include displayFlex;
                border-radius: 50%;
                margin: px2rem(13) auto;
                @include bgColor($defaultColor);
                @include fontSize(px2rem(25));
                @include color(white);

                .anticon {
                    @include fontSize(px2rem(50));
                    @include color(white);
                }

                &.pdf {
                    @include bgColor($yellowColor)
                }

                &.xml {
                    @include bgColor(#AFE7C5)
                }

                &.json {
                    @include bgColor(#9342d5)
                }

                &.txt {
                    @include bgColor(#4c98fc)
                }

                &.ppt, &.pptx {
                    @include bgColor(#d24625)
                }

                &.doc, &.docx {
                    @include bgColor(#2b5798)
                }

                &.xls, &.xlsx, &.csv {
                    @include bgColor(#207345)
                }
            }

            p {
                @include visibleFont;
                padding: 0 px2rem(15);
                text-align: center;
                @include color(#6E4B30);
                height: px2rem(16);
                line-height: px2rem(16);

                &:hover {
                    @include color($yellowColor);
                    text-decoration: underline;
                }
            }
        }
    }
}